{% extends 'base.html' %}
{% load static %}

{% block title %}外卖管理系统 - 首页{% endblock %}

{% block content %}
<div class="container">
    <!-- 搜索框 -->
    <div class="search-box mb-4">
        <form class="d-flex" method="GET" action="{% url 'merchant_list' %}">
            <input type="text" name="q" class="form-control me-2" placeholder="搜索商家、美食...">
            <button class="btn btn-primary" type="submit">搜索</button>
        </form>
    </div>

    <!-- 分类标签 -->
    <div class="category-tags mb-4">
        <div class="btn-group" role="group">
            <a href="{% url 'merchant_list' %}?category=all" class="btn btn-outline-primary">全部</a>
            <a href="{% url 'merchant_list' %}?category=fast_food" class="btn btn-outline-primary">快餐便当</a>
            <a href="{% url 'merchant_list' %}?category=chinese" class="btn btn-outline-primary">中式炒菜</a>
            <a href="{% url 'merchant_list' %}?category=drinks" class="btn btn-outline-primary">饮品甜点</a>
        </div>
    </div>

    <!-- 商家列表 -->
    <div class="merchant-list">
        <h2 class="mb-4">推荐商家</h2>
        <div class="row">
            {% for merchant in merchants %}
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <img src="{{ merchant.image.url|default:'static/images/default-store.jpg' }}" 
                         class="card-img-top" alt="{{ merchant.name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ merchant.name }}</h5>
                        <p class="card-text">
                            <small class="text-muted">
                                <i class="fas fa-star text-warning"></i> {{ merchant.rating|default:"暂无评分" }}
                                <span class="mx-2">|</span>
                                <i class="fas fa-clock"></i> {{ merchant.delivery_time }}分钟
                            </small>
                        </p>
                        <p class="card-text">{{ merchant.description|truncatechars:50 }}</p>
                        <a href="{% url 'merchant_detail' merchant.id %}" class="btn btn-primary">查看菜单</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <p>暂无推荐商家</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 可以添加一些交互效果
    document.addEventListener('DOMContentLoaded', function() {
        // 处理分类标签的激活状态
        const urlParams = new URLSearchParams(window.location.search);
        const category = urlParams.get('category') || 'all';
        document.querySelector(`[href*="category=${category}"]`)?.classList.add('active');
    });
</script>
{% endblock %}
